<!DOCTYPE html>
<html>
<head>
<title>Capacitor Circuit Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and General Settings ---
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = '20px sans-serif';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';

    // --- Coordinates ---
    const x_term = 80;
    const y_X = 100;
    const y_Y = 300;
    const x_junct = 150;

    // --- Draw Terminals and Main Wires ---
    // Terminal X
    ctx.fillText('X', x_term - 30, y_X);
    ctx.beginPath();
    ctx.arc(x_term, y_X, 5, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x_term + 5, y_X);
    ctx.lineTo(x_junct, y_X);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(x_junct, y_X, 3, 0, 2 * Math.PI);
    ctx.fill();

    // Terminal Y
    ctx.fillText('Y', x_term - 30, y_Y);
    ctx.beginPath();
    ctx.arc(x_term, y_Y, 5, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x_term + 5, y_Y);
    ctx.lineTo(x_junct, y_Y);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(x_junct, y_Y, 3, 0, 2 * Math.PI);
    ctx.fill();

    // --- Draw Capacitors ---
    // C1 (Left)
    const c1_y_top = 180;
    const c1_y_bot = 200;
    const c1_plate_width = 40;
    ctx.beginPath();
    ctx.moveTo(x_junct, y_X);
    ctx.lineTo(x_junct, c1_y_top);
    ctx.moveTo(x_junct - c1_plate_width / 2, c1_y_top);
    ctx.lineTo(x_junct + c1_plate_width / 2, c1_y_top);
    ctx.moveTo(x_junct - c1_plate_width / 2, c1_y_bot);
    ctx.lineTo(x_junct + c1_plate_width / 2, c1_y_bot);
    ctx.moveTo(x_junct, c1_y_bot);
    ctx.lineTo(x_junct, y_Y);
    ctx.stroke();
    ctx.fillText('24 µF', x_junct + c1_plate_width / 2 + 10, (c1_y_top + c1_y_bot) / 2);

    // C2 (Top Right)
    const c2_x = 240;
    const c2_plate_gap = 20;
    const c2_plate_height = 40;
    ctx.beginPath();
    ctx.moveTo(x_junct, y_X);
    ctx.lineTo(c2_x, y_X);
    ctx.moveTo(c2_x, y_X - c2_plate_height / 2);
    ctx.lineTo(c2_x, y_X + c2_plate_height / 2);
    ctx.moveTo(c2_x + c2_plate_gap, y_X - c2_plate_height / 2);
    ctx.lineTo(c2_x + c2_plate_gap, y_X + c2_plate_height / 2);
    ctx.stroke();
    ctx.fillText('24 µF', c2_x + c2_plate_gap + 5, y_X - 25);

    // C3 (Middle Right)
    const c3_x_start = c2_x + c2_plate_gap;
    const c3_y_top = 190;
    const c3_plate_width = 40;
    const c3_plate_gap_y = 20;
    const c3_y_bot = c3_y_top + c3_plate_gap_y;
    ctx.beginPath();
    ctx.moveTo(c3_x_start, y_X);
    ctx.lineTo(c3_x_start, c3_y_top);
    ctx.moveTo(c3_x_start - c3_plate_width / 2, c3_y_top);
    ctx.lineTo(c3_x_start + c3_plate_width / 2, c3_y_top);
    ctx.moveTo(c3_x_start - c3_plate_width / 2, c3_y_bot);
    ctx.lineTo(c3_x_start + c3_plate_width / 2, c3_y_bot);
    ctx.stroke();
    ctx.fillText('24 µF', c3_x_start + c3_plate_width / 2 + 10, (c3_y_top + c3_y_bot) / 2);

    // C4 (Bottom Right)
    const c4_x_left = c3_x_start - c2_plate_gap;
    const c4_x_right = c3_x_start;
    const c4_plate_height = 40;
    ctx.beginPath();
    ctx.moveTo(c4_x_right, c3_y_bot);
    ctx.lineTo(c4_x_right, y_Y);
    ctx.moveTo(c4_x_left, y_Y - c4_plate_height / 2);
    ctx.lineTo(c4_x_left, y_Y + c4_plate_height / 2);
    ctx.moveTo(c4_x_right, y_Y - c4_plate_height / 2);
    ctx.lineTo(c4_x_right, y_Y + c4_plate_height / 2);
    ctx.moveTo(x_junct, y_Y);
    ctx.lineTo(c4_x_left, y_Y);
    ctx.stroke();
    ctx.fillText('24 µF', c4_x_right + 5, y_Y - 5);

    // --- Draw Figure Caption ---
    ctx.font = 'bold 22px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 6.1', canvas.width / 2, 370);
</script>
</body>
</html>